<template>
  <div class="gj-detail" v-if="detail">
    <div class="banner" :style="'background-image: url(' + detail.banner+')'" v-if="detail.banner">
      <div class="h2">{{detail.name}}</div>
      <div class="line"></div>
      <div class="p">{{detail.ban_desc}}</div>
    </div>
    <div class="gj-detail-main1 box">
      <div class="jies flex-bect">
        <div class="imgW"><img :src="detail.logo" alt="" class="img"></div>
        <div class="w2 flex1">
          <div class="flex-bect">
            <div class="name">{{detail.name}}</div>
            <div class="address">{{detail.city}}</div>
          </div>
          <div class="desc" v-html="detail.desc"></div>
        </div>
      </div>
      <div class="con flex-bect">
        <div class="w1 flex1">
          <dl class="div">
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">招生对象</span></div>
              <div class="td flex-lect">
                <span v-for="(item, i) in detail.duix" :key="i" class="lab">{{item}}</span>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">课程方向</span></div>
              <div class="td flex-lect">
                <span v-for="(item, i) in detail.kcfx" :key="i" class="fx-lab">{{item}}</span>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">招生状态</span></div>
              <div class="td flex-lect">
                <span v-for="(item, i) in detail.zszt" :key="i" class="fx-lab">{{item}}</span>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">授课方式 </span></div>
              <div class="td flex-lect">
                <span v-for="(item, i) in detail.way" :key="i" class="fx-lab">{{item}}</span>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">特色课程</span></div>
              <div class="td flex-lect">
                <div class="flex-lect" style="flex-wrap: wrap;"><div v-for="(item, i) in detail.tskc" :key="i" class="kc-lab"><span class="sp inbk">{{item}}</span></div></div>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">学校性质</span></div>
              <div class="td flex-lect">
                <span class="fx-lab">{{detail.schoolxz}}</span>
              </div>
            </dd>
            <dd class="dd flex-bect">
              <div class="th flex-ct"><span class="btn flex-ct">学校地址</span></div>
              <div class="td flex-lect">
                <span class="fx-lab">{{detail.address}}</span>
              </div>
            </dd>
          </dl>
        </div>
        <div class="w2">
          <div class="tit">
            <div class="h2">北京德闳学校</div>
            <div class="p1">有问必答</div>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160" class="demo-ruleForm">
            <el-form-item label="学生姓名：" prop="name" data-index="1" :class="{on : fidx == 1}" class="item">
              <el-input v-model="ruleForm.name" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="学生性别：" prop="gender" data-index="2" :class="{on : fidx == 2}" class="item">
              <el-radio v-model="ruleForm.gender" :label="1">男</el-radio>
              <el-radio v-model="ruleForm.gender" :label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="出生日期：" prop="birthday" data-index="3" :class="{on : fidx == 3}" class="item">
              <!-- <el-input v-model="ruleForm.birthday" placeholder="请选择出生年月日"></el-input> -->
              <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="请选择出生年月日"></el-date-picker>
            </el-form-item>
            <el-form-item label="申请年级：" prop="grade" data-index="4" :class="{on : fidx == 4}" class="item">
              <el-select v-model="ruleForm.grade" filterable placeholder="请选择年级">
                <el-option v-for="item in nianjiList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码：" prop="mobile" data-index="5" :class="{on : fidx == 5}" class="item">
              <el-input v-model="ruleForm.mobile" placeholder="请填写手机号码"></el-input>
            </el-form-item>
            <el-form-item label="您的疑问：" prop="problem" data-index="6" :class="{on : fidx == 6}" class="item">
              <el-input v-model="ruleForm.problem" placeholder="请填写您的疑问"></el-input>
            </el-form-item>
            <div class="flex-ct"><span class="cur btn flex-ct">提交</span></div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="gj-detail-main2 clearfix">
      <div class="box clearfix">
        <div class="tit">{{detail.name}}常见问题</div>
        <div class="flex-bect con">
          <div class="w-list">
            <template v-if="wlist">
              <a v-for="item in wlist" :key="item.id" :href="router.gjProblemDetail+'?id='+item.id" class="item">
                <div class="time">
                  <div class="day">{{item.day}}</div>
                  <div class="p">{{item.time}}</div>
                </div>
                <div class="div">
                  <div class="name row1">{{item.name}}</div>
                  <div class="desc row3" v-html="item.desc"></div>
                </div>
                <span class="more">更多 》</span>
              </a>
            </template>
            <div class="flex-ct page"><el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination></div>
          </div>
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let router = getPath(); // 所有路径
// 不支持 import
let time = new Date().getTime();
module.exports = {
  props:{
    detail:{
      type:Object,
      default:null
    },
    wlist:{
      type:Array,
      default:null
    },
    newclass:{
      type:String,
      default:""
    },
    total:{
      type:Number,
      default:0
    },
    title:{
      type:String,
      default:""
    },
  },
  data: function () {
    return {
      router:router,
      bkList:[
        {id:1,name:"学校费用", src:"./static/image/gj_01_detail/bk-ico1.png"},
        {id:2,name:"入学考试", src:"./static/image/gj_01_detail/bk-ico2.png"},
        {id:3,name:"报名流程", src:"./static/image/gj_01_detail/bk-ico3.png"}
      ],
      fidx:"",
      nianjiList:[{id:1, name:"一年级"}, {id:2, name:"二年级"}, {id:3, name:"三年级"}, {id:4, name:"四年级"}, {id:5, name:"五年级"}, {id:6, name:"六年级"}],
      ruleForm:{
        name:"",
        gender:1,
        birthday:"",
        grade:"",
        mobile:"",
        problem:""
      },
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择学生性别', trigger: 'change' }
        ],
        birthday: [
          { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        grade: [
          { type: 'date', required: true, message: '请选择年级', trigger: 'change' }
        ],
        mobile: [
          { type: 'array', required: true, message: '请填写手机号码', trigger: 'blur' }
        ],
        problem: [
          { required: true, message: '请填写您的疑问', trigger: 'blur' }
        ],
      },
    };
  },
  watch:{
    
  },
  components: {},
  mounted(){
    
  },
  methods:{
    
    // 翻页
    handleCurrentChange(e){
      console.log('翻页', e)
    },
  }
};
</script>

<style>

</style>